<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			min-width: 320px;
			line-height: 1.5;
			color: #353d44;
			font-family: Arial, Helvetica, STHeiTi, sans-serif;
			background: #F4F4F4;
			width: 100%
		}

		.w {
			margin: 0 auto;
			max-width: 15rem
		}

		html {
			font-size: 21.33px
		}

		body {
			font-size: 12px
		}

		@media screen and (min-width:320px) {
			html {
				font-size: 21.33px
			}

			body {
				font-size: 12px
			}
		}

		@media screen and (min-width:360px) {
			html {
				font-size: 24px
			}

			body {
				font-size: 12px
			}
		}

		@media screen and (min-width:375px) {
			html {
				font-size: 25px
			}

			body {
				font-size: 12px
			}
		}

		@media screen and (min-width:384px) {
			html {
				font-size: 25.6px
			}

			body {
				font-size: 14px
			}
		}

		@media screen and (min-width:400px) {
			html {
				font-size: 26.67px
			}

			body {
				font-size: 14px
			}
		}

		@media screen and (min-width:414px) {
			html {
				font-size: 27.6px
			}

			body {
				font-size: 14px
			}
		}

		@media screen and (min-width:424px) {
			html {
				font-size: 28.27px
			}

			body {
				font-size: 14px
			}
		}

		@media screen and (min-width:480px) {
			html {
				font-size: 32px
			}

			body {
				font-size: 15.36px
			}
		}

		@media screen and (min-width:540px) {
			html {
				font-size: 36px
			}

			body {
				font-size: 17.28px
			}
		}

		@media screen and (min-width:720px) {
			html {
				font-size: 48px
			}

			body {
				font-size: 23.04px
			}
		}

		@media screen and (min-width:750px) {
			html {
				font-size: 50px
			}

			body {
				font-size: 24px
			}
		}

		.hide {
			/*display: none;*/
			opacity: 0;
		}

		.draw-gift {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.draw-gift .draw-img {
			width: 100%;
			position: relative;
			margin-top: 6.5rem;
		}

		.draw-gift .draw-img .draw-down {
			position: absolute;
			width: 9rem;
			height: 9.9rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
			left: 50%;
			margin-left: -4.5rem;
			z-index: 10;
			/*-webkit-animation:draw-down 0.5s ease 1.2s 1 alternate;*/
			/*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
		}

		@-webkit-keyframes draw-down {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 0.5;
			}

			100% {
				opacity: 0;
			}
		}

		.draw-gift .draw-img .draw-down2 {
			position: absolute;
			width: 9rem;
			height: 9.9rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
			left: 50%;
			margin-left: -4.5rem;
			z-index: 10;
			/*-webkit-animation:draw-down2 0.5s ease 1.4s 1 alternate;*/
			/*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
		}

		@-webkit-keyframes draw-down2 {
			0% {
				opacity: 0;
			}

			50% {
				opacity: 0.5;
			}

			100% {
				opacity: 1;
			}
		}

		.draw-gift .draw-img .draw-mid {
			position: absolute;
			width: 3rem;
			height: 3rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
			left: 50%;
			margin-left: -1.5rem;
			z-index: 100;
			top: 1.9rem;
			/*animation:open 0.3s linear 1s 3 alternate;*/
		}

		.draw-gift .draw-img .draw-mid-move {
			-webkit-animation: open 0.2s linear 0.5s infinite alternate;
			-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
			animation: open 0.2s linear 0.5s infinite alternate;
			animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		}

		@keyframes open {
			0% {
				transform: scale(1);
			}

			100% {
				transform: scale(0.9);
			}
		}

		@-webkit-keyframes open {
			0% {
				-webkit-transform: scale(1);
			}

			100% {
				-webkit-transform: scale(0.9);
			}
		}

		.draw-gift .draw-img .draw-up {
			position: absolute;
			width: 9rem;
			height: 4.15rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
			left: 50%;
			margin-left: -4.5rem;
			top: 0;
			z-index: 8;
			opacity: 0;
		}

		.draw-gift .draw-img .draw-up-up {
			position: absolute;
			width: 9rem;
			height: 4.12rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
			left: 50%;
			margin-left: -4.5rem;
			top: 0;
			/*-webkit-transform: rotateX(180deg);*/
			/*-webkit-transform-style: flat;*/
			/*-webkit-transform-origin: bottom;*/
			/*-webkit-animation: draw-up-up 1s linear 0s 0.5 normal;*/
			/*backface-visibility: visible;*/
			/*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
			opacity: 0;
			z-index: 3;
		}

		.draw-gift .draw-img .draw-list {
			position: absolute;
			width: 5rem;
			height: 6rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
			left: 50%;
			margin-left: -2.5rem;
			top: 3.5rem;
			opacity: 0;
			z-index: 8;
		}

		.draw-gift .draw-img .draw-list img {
			vertical-align: middle;
			position: absolute;
			width: 70%;
			top: 1.6rem;
			left: 15%;
		}

		#draw-btn {
			position: absolute;
			width: 100%;
			text-align: center;
			font-size: 0.65rem;
			color: #333;
			top: 17rem;
		}
	</style>
	<body>
		<div class="draw-gift">
			<div class="draw-img">
				<div class="draw-up hide"></div>
				<div class="draw-up-up" id="draw-up-up"></div>
				<div class="draw-mid draw-mid-move"></div>
				<div class="draw-down"></div>
				<div class="draw-down2 hide"></div>
				<div class="draw-list"><img src="image/open-hagen.jpg"></div>
			</div><a href="javascript:;" id="draw-btn">点击打开</a>
		</div>
	</body>
	<script src="../jquery相关/js/jq.js"></script>
	<script>
		$(function() {
			$("#draw-btn,.draw-img").on("click", function() {
				$(".draw-mid").removeClass("draw-mid-move").css({
					display: "none"
				});
				$(".draw-up").animate({
					opacity: "1"
				}, 100);
				$("#draw-up-up").animate({
					opacity: "1",
					top: "-4.12rem"
				}, 200);
				$(".draw-down").animate({
					opacity: "0"
				}, 300);
				$(".draw-down2").animate({
					opacity: "1"
				}, 300);
				$(".draw-list").animate({
					opacity: "1"
				}, 600).animate({
					top: "-4.4rem"
				}, 1000);
			});
		})
	</script>
</html>
